<script setup lang='ts'>
// import ShowCase from './components/01.v-if、v-show.vue'
// import BindCase from './components/02.V-bind.vue'
// import forCase from './components/03.v-for.vue'
// import modelCase from './components/04.v-model.vue'
// import computedCase from './components/05.computed.vue'
// import watchCase from './components/06.watch.vue'
// import refcase from './components/07.ref.vue'
// import categoryCase from './components/CaseList.vue'
// import HmBody from './components/HmBody.vue';
// import HmFooter from './components/HmFooter.vue';
// import HmHeader from './components/HmHeader.vue';
// import parent from './components/父组件.vue'
import GrandFa from './components/爷爷组件.vue'
</script>

<template>
  <!-- <ShowCase></ShowCase> -->
  <!-- <BindCase></BindCase> -->
  <!-- <forCase></forCase> -->
  <!-- <modelCase></modelCase> -->
  <!-- <computedCase></computedCase> -->
  <!-- <watchCase></watchCase> -->
  <!-- <refcase></refcase> -->
  <!-- <categoryCase></categoryCase> -->
  <!-- <div class="container">
    <HmHeader></HmHeader>
    <HmBody></HmBody>
    <HmFooter></HmFooter>
  </div> -->
  <!-- <parent></parent> -->
  <GrandFa></GrandFa>

</template>

<style scoped>
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

* {
  padding: 0;
  margin: 0;
}
</style>